<template>
	<!-- @scrolltolower  页面触底时触发 -->
	<scroll-view @scrolltolower="handleToLwer" scroll-y class="recommend_view" v-if="recommends.length>0">
		<view class="recommend_warp">
			<navigator class="recommend_item" v-for="item in recommends" :key="item.id" :url="`/pages/album/index?id=${item.target}`">
				<image :src="item.thumb" mode="widthFix"></image>
			</navigator>
		</view>


		<view class="moneths_warp">

			<view class="moneths_title">

				<view class="moneths_title_info">
					<view class="moneths_info">
						<text>{{monthes.DD}} / </text>
						{{monthes.MM}}月
					</view>
					<view class="moneths_text">{{monthes.title}}</view>
				</view>

				<view class="moneths_title_more">更多 ></view>
			</view>

			<view class="moneths_content">

				<view class="moneths_item" v-for="(item,index) in monthes.items" :key="item.id">
					<get-detail :list="monthes.items" :index="index">
						<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
					</get-detail>
				</view>
			</view>

		</view>


		<!-- 热门 -->
		<view class="hots_warp">
			<view class="hots_title">
				<text>热门</text>
			</view>
			<view class="hots_content">
				<view class="hots_item" v-for="(item,index) in hots" :key="hots.id">
					<get-detail :list="hots" :index="index">
						<image :src="item.img" mode=""></image>
					</get-detail>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import moment from 'moment';
	import getDetail from '@/components/getDetail/getDetail.vue'
	export default {
		components: {
			getDetail
		},
		data() {
			return {
				recommends: [],
				monthes: {},
				hots: [],
				params: {
					limit: 30,
					order: 'hot',
					skip: 0
				},
				hasMore: true
			};
		},
		mounted() {
			this.getList()

			uni.setNavigationBarTitle({
				title: '推荐'
			})
		},
		methods: {
			getList() {
				this.request({
					url: 'http://157.122.54.189:9088/image/v3/homepage/vertical',
					data: this.params
				}).then(res => {

					if (res.res.vertical.length === 0) {
						this.hasMore = false;
						return;
					}

					if (this.recommends.length === 0) {
						this.recommends = res.res.homepage[1].items;
						this.monthes = res.res.homepage[2];
						this.monthes.MM = moment(this.monthes.stime).format('MM');
						this.monthes.DD = moment(this.monthes.stime).format('DD');
						this.hots = res.res.vertical;
					}
					this.hots = [...this.hots, ...res.res.vertical]
				})
			},
			handleToLwer() {
				if (this.hasMore) {
					this.params.skip += this.params.limit;
					this.getList();
				} else {
					uni.showLoading({
						title: "没有数据了",
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend_view {
		height: calc(100vh - 36px);
	}

	.recommend_warp {
		display: flex;
		flex-wrap: wrap;

		.recommend_item {
			width: 50%;
			border: 3rpx solid #fff;
		}
	}

	.moneths_warp {
		.moneths_title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;

			.moneths_title_info {
				color: #d52a7e;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;

				.moneths_info {
					text {
						font-size: 36rpx;
					}
				}



				.moneths_text {
					font-size: 34rpx;
					color: #666;
					margin-left: 30rpx;
				}
			}

			.moneths_title_more {
				font-size: 24rpx;
				color: #d52a7e;
				font-weight: 600;
			}
		}

		.moneths_content {
			display: flex;
			flex-wrap: wrap;

			.moneths_item {
				width: 33.3%;
				border: 3rpx solid #fff;
			}
		}
	}

	.hots_warp {
		.hots_title {
			padding: 20rpx;

			text {
				border-left: 15rpx solid #d52a7e;
				padding-left: 20rpx;
				font-size: 24rpx;
				font-weight: 600;
			}
		}

		.hots_content {
			display: flex;
			flex-wrap: wrap;

			.hots_item {
				width: 33.33%;
				border: 5rpx solid #fff;

				img {}
			}
		}
	}
</style>
